<template>
  <div class="page-miH page-bgBack checkTimeEntry-box">
    <a-alert
      message="该页面仅展示管理员通过小程序进行录入的员工工时"
      type="info"
      show-icon
      style="margin-bottom: 24px; background: #e6f7ff !important"
      closable
    />
    <div class="xq-form-wrapper">
      <div class="xq-form-search">
        <a-input-search
          allowClear
          v-model="nameOrPhone"
          placeholder="搜索姓名/手机号"
          class="mr12"
          style="width: 240px"
          @search="handleSearch"
        />
        <a-date-picker valueFormat="YYYY-MM-DD" :allow-clear="false" style="width: 240px" v-model="time" @change="handleSearch" />
        <!-- <a-range-picker valueFormat="YYYY-MM-DD" :allow-clear="false" style="width: 240px" v-model="Time" @change="handleSearch" /> -->
      </div>
      <a-spin :spinning="spinning" class="xq-form-content" style="margin-top: 24px">
        <XqTable
          :customize="FormJson['config']['table']['customize']"
          :scroll="{ x: columns.length * 150 }"
          :pagination="false"
          :dataSource="tableData"
          :columns="columns"
          :row-selection="
            FormJson['config']['table']['extend']['batch']
              ? {
                  selectedRowKeys: selectedRowKeys,
                  onChange: onSelectChange
                }
              : null
          "
          class="xq-form-content-table"
          @change="onTableChange"
        >
          <!-- 主要内容，表格，自定义 header -->
          <template v-for="(col, index) in columns" v-slot:[`xq_${col.dataIndex}`]>
            <span :key="index">
              {{ col.customTitle }}
            </span>
          </template>
          <!-- 主要内容，表格，自定义 td -->
          <!-- eslint-disable-next-line prettier/prettier -->
          <template v-for="(col, index) in columns" v-slot:[col.dataIndex]="text, record">
            <!-- <span v-if="col.dataIndex === 'gmtCreate'" :key="index">
              {{ text ? moment(text).format("YYYY-MM-DD") : "" }}
            </span> -->
            <span v-if="col.dataIndex === 'gmtModified'" :key="index">
              {{ text ? moment(text).format("YYYY-MM-DD HH:mm") : "" }}
            </span>
            <span v-else-if="col.dataIndex === 'isWork'" :key="index">
              {{ text ? "出勤" : "缺勤" }}
            </span>
            <span v-else-if="col.dataIndex === 'status'" :key="index">
              <span v-if="text == 1">满勤</span>
              <span v-if="text == 2">缺勤</span>
              <span v-if="text == 0">旷工</span>
            </span>
            <XqTableCell v-else :key="index" :record="record" :field="FormJson['fields'][col.dataIndex]" :dynamicData="dynamicData" />
          </template>
        </XqTable>
        <div class="xq-form-content-pagination">
          <div class="xq-form-content-pagination-total">共 {{ total }} 条</div>
          <a-pagination
            v-model="pageNo"
            :page-size="pageSize"
            :total="total"
            :show-size-changer="true"
            :show-quick-jumper="true"
            :page-size-options="['10', '20', '50', '100']"
            @change="onPageChange"
            @showSizeChange="onPageSizeChange"
          />
        </div>
      </a-spin>
    </div>
  </div>
</template>

<script>
import FormJson from "./FormJson";
import XqCurdMixin from "xqjr-plugin-form/mixins/XqCurdMixin";
import { getEmpAttendances } from "./api";
import moment from "moment";

const curdMixin = new XqCurdMixin({
  FormJson,
  tableConfigKey: "table"
});

export default {
  mixins: [curdMixin],
  data() {
    return {
      spinning: false,
      tableData: [],
      postName: "",
      total: 0,
      pageNo: 1,
      pageSize: 10,
      nameOrPhone: "",
      time: moment().format("YYYY-MM-DD"),
      Time: [moment().format("YYYY-MM-DD"), moment().format("YYYY-MM-DD")]
    };
  },
  created() {
    this.onGetFindPostByQuery();
  },
  methods: {
    moment,
    handleSearch() {
      this.pageNo = 1;
      this.onGetFindPostByQuery();
    },
    async onGetFindPostByQuery() {
      try {
        this.spinning = true;
        const time = this.time.split("-");
        const { data } = await getEmpAttendances({
          // "orders[0].property": "gmtCreate",
          // "orders[0].desc": false,
          companyIdList: [this.$store.state.hr.companyId],
          nameOrPhone: this.nameOrPhone,
          yearly: time[0],
          monthly: time[1],
          daily: time[2],
          pageNo: this.pageNo,
          pageSize: this.pageSize
        });
        this.tableData = data.entities;
        this.tableData.forEach(e => {
          e.name = e.empInfoVO.name ? e.empInfoVO.name : "";
          e.phone = e.empInfoVO.phone ? e.empInfoVO.phone : "";
          e.gmtCreate1 = [e.yearly, e.monthly, e.daily].join("-");
        });
        this.total = data.entityCount;
        setTimeout(() => (this.spinning = false), 500);
      } catch (err) {
        console.log("error log --> ", err);
        setTimeout(() => (this.spinning = false), 500);
      }
    },
    onPageChange(page) {
      this.pageNo = page;
      this.onGetFindPostByQuery();
    },
    onPageSizeChange(current, pageSize) {
      this.pageNo = 1;
      this.pageSize = pageSize;
      this.onGetFindPostByQuery();
    }
  }
};
</script>

<style lang="scss" scoped>
.checkTimeEntry-box {
  padding: 24px;
}
</style>
